// 

let layer = layui.layer;
let form = layui.form
let laypage = layui.laypage;

// 设置一个查询对象 本身这些数据是空的

let q = {
    pagenum: 1, //页码值
    pagesize: 2, //每页显示多少条数据
    cate_id: '', //文章分类的 Id
    state: '' //文章的状态，可选值有：已发布、草稿
}


initTable()

// 渲染文章列表数据
function initTable() {
    // 发送Ajax
    axios({
        method: 'GET',
        url: '/my/article/list',
        params: q
    }).then(({
            data: res
        }) => {
            const orgin = res.data.map((item) => {
                const {
                    Id,
                    title,
                    state,
                    pub_date,
                    cate_name
                } = item
                return `
        <tr>
            <td>${title}</td>
            <td>${cate_name}</td>
            <td>${pub_date}</td>
            <td>${state}</td>
            <td>
            <button class="layui-btn" lay-submit data-id=${Id} >编辑</button>
            <button class="layui-btn" lay-submit data-id=${Id} id="delet">删除</button>
            </td>
           
        </tr>
        `
            }).join('')
            $('tbody').html(orgin)
            // console.log();
            let total = res.total
            // 渲染完列表数据 就渲染分页
            renderPage(total)
        }

    )
}


// 发送Ajax 获取文章分类
axios({
    method: 'GET',
    url: '/my/article/cates'
}).then(({
    data: res
}) => {
    const getName = res.data.map(item => {
        const {
            Id,
            name
        } = item
        return `
        <option value="">${name}</option>
        `
    }).join('')
    $('[name=cate_id]').append(getName)
    // 更新渲染 有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。
    form.render()
    // console.log();
})

// 实现筛选 利用表单把下拉菜单中的值 获取过来 重新赋值给查询对象
$('#form-search').on('submit', function (e) {
    e.preventDefault()
    // 获取下拉框选择的值 val是方法 获取对象的值
    let cateId = $('[name=cate_id]').val()
    let state = $('[name=name]').val()
    // 把获取来的值 重新赋值给 查询对象
    // console.log(cateId);
    // console.log(state);
    q.cate_id = cateId
    q.state = state
    // 在重新渲染我们的 列表数据
    initTable()
})

function renderPage(msg) {
    laypage.render({
        elem: 'listTab', //注意，这里的 test1 是 ID，不用加 # 号
        count: msg, //数据总数，从服务端得到
        limit: q.pagesize, //每页显示的条数
        curr: q.pagenum, //起始页
        limits: [2, 5, 8, 10], //每页条数的选择项
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            q.pagenum = obj.curr
            q.pagesize = obj.limit
            //首次不执行
            if (!first) {
                initTable()
            }
        }

    });
}

// 通过代理的方式 实现点击事件
$('tbody').on('click', '#delet', function (e) {
    // 阻止默认行为
    e.preventDefault()
    let id = e.target.dataset.id
    layer.confirm('此操作将永久删除该文章，是否继续?', {
        icon: 3,
        area: ['500px', '200px']
    }, function (index) {
        // 发送Ajax 
        axios({
            method: 'GET',
            url: '/my/article/delete/' + id
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            layer.msg('列表 删除成功')
            // 重新渲染列表函数
            initTable()
        })
        layer.close(index);
    });


})